<template>
<div style="height: 100%;width: 100%">
  <svg-icon @dblclick="enter"  icon-class="makedown" className="icon"></svg-icon>
  <input @click="inputFocus" style="width: 90%;height: 20px;font-size: 16px" @input="change" class="drag-cancel" v-model="compTitle">
</div>
</template>

<script>

export default {
  data(){
    return {
      compTitle:this.title
    }
  },
  props: {
    title: String,
  },
  watch:{
    title(title){
      this.compTitle=title
    }
  },

  methods:{
    enter(){
      this.$emit("dblEvent")
    },
    change(){
      this.$emit('changeTitle',this.compTitle);
    },
    inputFocus(){
      this.$emit('inputFocus');
    }
  }
}

</script>

<style scoped>
.icon{
  width: 100%;
  height: 100%;
}
input {
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
}
</style>